<template>
  <div class="form-layout-wrap">
    <!-- 栅格化模式 -->
    <template v-if="layoutType === 'grid'">
      <a-row class="grid-form-wrap" :type="rowType" :align="rowAlign" :justify="rowJustify" :gutter="[8, 0]">
        <a-col v-for="colItem in optionList" :key="colItem.prop" :span="colItem.span" :push="colItem.push">
          <a-form-model-item v-show="colItem.show !== undefined ? colItem.show : true" :ref="colItem.prop" :label="colItem.label" :prop="colItem.prop">
            <slot :row="colItem" :prop="colItem.prop" :type="colItem.type"></slot>
          </a-form-model-item>
        </a-col>
      </a-row>
    </template>
    <!-- 普通模式 -->
    <template v-else>
      <a-form-model-item
        v-for="(item, index) in optionList"
        :key="index"
        :ref="item.prop"
        :prop="item.prop"
        :label="item.label">
        <slot></slot>
      </a-form-model-item>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    layoutType: { // 布局情况，grid为使用栅格化
      type: String,
      default: () => 'normal' // normal or grid
    },
    optionList: { // 配置
      type: [Array, Object]
    },
    rowType: {
      type: String,
      default: () => 'flex'
    },
    rowAlign: String,
    rowJustify: String
  },
  data() {
    return {

    }
  },
  mounted() {
  }
}
</script>
